<div class="ml-2">
  <h4 class="mb-4 ">
    <strong>${TableName!}</strong>
  </h4>
  <div class="form-group form-inline">
    <#list  columns as field>
    <#if field.jsType=="string">
      <input [(ngModel)]="queryParam.${field.columnName!}" class="form-control" type="text" name="${field.columnName!}" placeholder="search by ${field.columnName!}"
             (keyup.enter)="doSearch()" />
    </#if>

    </#list>


  </div>
  <div>
    <button (click)="doAdd()" nz-button nzType="primary" nzSize="large" class="float-right d-inline">New</button>
  </div>
  <app-${table\-name!}-modal (ok)="doSearch()" [(visiable)]="modalConfig.visiable" [record]="modalConfig.record"></app-${table\-name!}-modal>
</div>

<nz-table #dataTable
          [nzLoading]="table.loading"
          [nzData]="table.dataSet"
          [nzFrontPagination]="false"
          [nzPageIndex]="table.page.pageIndex"
          [nzPageSize]="table.page.pageSize"
          [nzTotal]="table.page.total"
          (nzPageIndexChange)="pageChange($event)"
          nzSize="small"
          class="mb-4"
         >

  <thead>
  <tr>
    <#list  columns as field>
      <th>${field.COLUMNNAME!}</th>
    </#list>
    <th>ACTION</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let item of dataTable.data">
    <#list  columns as field>
      <td>{{item.${field.columnName!}}}</td>
    </#list>
    <td>
      <button (click)="doEdit(item)"  nz-button nzType="default">Edit</button>
      <nz-divider nzType="vertical"></nz-divider>
      <button
        nz-popconfirm=""
        nzPopconfirmTitle="Are you sure ?"
        nzPopconfirmPlacement="rightBottom"
        (nzOnConfirm)="doRemove(item)"
        nz-button nzType="default" nzDanger>Delete</button>
    </td>
  </tr>
  </tbody>
</nz-table>
